<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改股票主板详细')" />
    <th:block th:include="include :: datetimepicker-css" />
    <script th:src="@{/js/plugins/echarts/echarts.min.js}"></script>
</head>
<body class="white-bg">
<div id="main" style="width: 800px; height: 400px;"></div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <script th:inline="javascript">
        var myChart = echarts.init(document.getElementById('main'));
         var id = 106;
        // 发送AJAX请求到后端API获取数据
        // console.log(mainId+11);
        const mainId = [[${mainId}]];
        const formData = new FormData();
        formData.append('mainId', mainId);
        fetch('/system/main/board/allStockMainBoardDetail', {
            method: 'POST',
            body: formData
        }).then(response => response.json())
            .then(data => {
                // 处理数据并更新图表
                var option = {
                    title: {
                        // text: getTitle(data), // 初始化时调用函数设置标题
                        text: data[0] ? data[0].stockName : '默认标题', // 初始化时调用函数设置标题.get
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        data: data.map(item => item.day)
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: data.map(item => item.stockPrice),
                        type: 'line',
                        smooth: 0,
                        label: {
                            show: true, // 显示标签
                            position: 'top', // 标签位置
                            formatter: function (params) {
                                return params.value; // 显示数值
                            }
                        }
                    }]
                };
                myChart.setOption(option);
            })
            .catch(error => console.error('Error loading the data:', error));
    </script>
</body>
</html>